<template>
  <div class="nav">
    <Breadcrumb>
      <BreadcrumbItem>系统配置</BreadcrumbItem>
      <BreadcrumbItem>消息通知</BreadcrumbItem>
      <BreadcrumbItem>列表</BreadcrumbItem>
    </Breadcrumb>
  </div>
  <div class="tab">
    <Tabs value="name1" :animated="false" style="padding: 10px">
      <TabPane label="通知模板" name="tzmb">
        <div class="tzmb">
          <vxe-grid
            v-bind="gridOptions1"
            style="padding-left: 15px; padding-right: 15px"
          >
          </vxe-grid>
        </div>
      </TabPane>
      <TabPane label="邮件网关" name="yjwg">
        <div class="yjwg">
          <Form
            ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            
            
          >
            <FormItem label="邮件推送状态" prop="gender" >
              <RadioGroup v-model="formValidate.gender">
                <Radio label="开启">开启</Radio>
                <Radio label="关闭">关闭</Radio>
              </RadioGroup>
            </FormItem>

            <FormItem label="SMTP服务器地址" prop="name">
              <Input
                v-model="formValidate.name"
                placeholder="请输入姓名"
                style="width: 310px"
              ></Input>
            </FormItem>
            <FormItem label="SMTP服务器端口" prop="name">
              <Input
                v-model="formValidate.name"
                placeholder="请输入姓名"
                style="width: 310px"
              ></Input>
            </FormItem>

            <FormItem label="SSL加密" prop="gender">
              <RadioGroup v-model="formValidate.gender">
                <Radio label="开启">开启</Radio>
                <Radio label="关闭">关闭</Radio>
              </RadioGroup>
            </FormItem>

            <FormItem label="账号" prop="name">
              <Input
                v-model="formValidate.name"
                placeholder="请输入姓名"
                style="width: 310px"
              ></Input>
            </FormItem>
            <FormItem label="密码" prop="name">
              <Input
                v-model="formValidate.name"
                placeholder="请输入姓名"
                style="width: 310px"
              ></Input>
            </FormItem>
            <FormItem label="昵称" prop="name">
              <Input
                v-model="formValidate.name"
                placeholder="请输入姓名"
                style="width: 310px"
              ></Input>
            </FormItem>

            <FormItem>
              <Button type="primary" @click="handleSubmit('formValidate')"
                >保存</Button
              >
              <Button
                @click="handleReset('formValidate')"
                style="margin-left: 8px"
                >发送测试邮件</Button
              >
            </FormItem>
          </Form>
        </div>
      </TabPane>
      <TabPane label="短信网关" name="dxwg">
        <div class="dxwg">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">

            <FormItem label="短信推送状态" prop="gender">
                <RadioGroup v-model="formValidate.gender">
                  <Radio label="开启">开启</Radio>
                  <Radio label="关闭">关闭</Radio>
                </RadioGroup>
              </FormItem>
  
              <FormItem label="短信网关平台" prop="name">
                <Input
                  v-model="formValidate.name"
                  placeholder="阿里云短信"
                  style="width: 310px"
                  disabled
                ></Input>
              </FormItem>
              <FormItem label="服务地址" prop="name">
                <Input
                  v-model="formValidate.name"
                  placeholder="请输入姓名"
                  style="width: 310px"
                ></Input>
              </FormItem>
              <FormItem label="AccessKeyId" prop="name">
                <Input
                  v-model="formValidate.name"
                  placeholder="请输入姓名"
                  style="width: 310px"
                ></Input>
              </FormItem>
              <FormItem label="AccessKeySecret
              " prop="name">
                <Input
                  v-model="formValidate.name"
                  placeholder="请输入姓名"
                  style="width: 310px"
                ></Input>
              </FormItem>
              <FormItem label="模板编号
              " prop="name">
                <Input
                  v-model="formValidate.name"
                  placeholder="请输入姓名"
                  style="width: 310px"
                ></Input>
              </FormItem>
              <FormItem label="模板内容
              " prop="name">
                <Input
                  v-model="formValidate.name"
                  placeholder="请输入姓名"
                  style="width: 310px"
                ></Input>
              </FormItem>
              <FormItem label="签名
              " prop="name">
                <Input
                  v-model="formValidate.name"
                  placeholder="请输入姓名"
                  style="width: 310px"
                ></Input>
              </FormItem>

              <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')"
                  >保存</Button
                >
                <Button
                  @click="handleReset('formValidate')"
                  style="margin-left: 8px"
                  >发送测试邮件</Button
                >
              </FormItem>
          </Form>
        </div>
      </TabPane>

      <TabPane label="微信公众号" name="wxgzh">
        <div class="wxgzh">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">

            <FormItem label="微信推送状态
            " prop="gender">
                <RadioGroup v-model="formValidate.gender">
                  <Radio label="开启">开启</Radio>
                  <Radio label="关闭">关闭</Radio>
                </RadioGroup>
              </FormItem>
  
              <FormItem label="微信公众号ID
              " prop="name">
                <Input
                  v-model="formValidate.name"
                  placeholder="阿里云短信"
                  style="width: 310px"
                  disabled
                ></Input>
              </FormItem>
              <FormItem label="微信公众号Secret
              " prop="name">
                <Input
                  v-model="formValidate.name"
                  placeholder="请输入姓名"
                  style="width: 310px"
                ></Input>
              </FormItem>
              <FormItem label="微信消息推送时间
              " prop="name">
                <Input
                  v-model="formValidate.name"
                  placeholder="请输入姓名"
                  style="width: 310px"
                ></Input>
              </FormItem>
              

              <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')"
                  >保存</Button
                >
                
              </FormItem>
          </Form>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>
  
  <script setup>
import { ref, reactive } from "vue";
const gridOptions1 = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,

  id: "toolbar_demo_2",
  loading: false,
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    { field: "id", title: "序号", width: 70, align: "center" },
    { field: "name", title: "采购标题", width: 184 },
    { field: "prescription", title: "采购时间", width: 180 },
    { field: "diagnosis", title: "供应商", align: "center" },
    { field: "Department", title: "供应商负责人", width: 100, align: "center" },
  ],
  data: [
    {
      id: 1,
      name: "陈文婷",
      prescription: "321",
      diagnosis: "肺炎：肺部感染，通常由",
      Department: "--",
      state: 28,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 2,
      name: "吕致盈",
      prescription: "322",
      diagnosis: "胃溃疡：胃黏膜下层或",
      Department: "--",
      state: 22,
      Interventions: "Guangzhou",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 3,
      name: "陈文婷",
      prescription: "325",
      diagnosis: "高血压：血压持续升高",
      Department: "--",
      state: 32,
      Interventions: "Shanghai",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 4,
      name: "陈文婷",
      prescription: "327",
      diagnosis: "1",
      Department: "中药部门",
      state: 23,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
  ],
});

const formValidate = ref({
  name: "",
  mail: "",
  city: "",
  gender: "",
  interest: [],
  date: "",
  time: "",
  desc: "",
});
const ruleValidate = ref({
  name: [
    { required: true, message: "The name cannot be empty", trigger: "blur" },
  ],
  mail: [
    { required: true, message: "Mailbox cannot be empty", trigger: "blur" },
    { type: "email", message: "Incorrect email format", trigger: "blur" },
  ],
  city: [
    { required: true, message: "Please select the city", trigger: "change" },
  ],
  gender: [
    { required: true, message: "Please select gender", trigger: "change" },
  ],
  interest: [
    {
      required: true,
      type: "array",
      min: 1,
      message: "Choose at least one hobby",
      trigger: "change",
    },
    {
      type: "array",
      max: 2,
      message: "Choose two hobbies at best",
      trigger: "change",
    },
  ],
  date: [
    {
      required: true,
      type: "date",
      message: "Please select the date",
      trigger: "change",
    },
  ],
  time: [
    {
      required: true,
      type: "string",
      message: "Please select time",
      trigger: "change",
    },
  ],
  desc: [
    {
      required: true,
      message: "Please enter a personal introduction",
      trigger: "blur",
    },
    {
      type: "string",
      min: 20,
      message: "Introduce no less than 20 words",
      trigger: "blur",
    },
  ],
});

const handleSubmit = (name) => {
  this.$refs[name].validate((valid) => {
    if (valid) {
      this.$Message.success("Success!");
    } else {
      this.$Message.error("Fail!");
    }
  });
};
const handleReset = (name) => {
  this.$refs[name].resetFields();
};
</script>
  
  <style scoped>
.nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  font-size: 20px;
}


.tzmb {
  border-left: 5px solid#f5f7f9;
  border-right: 5px solid#f5f7f9;
  background-color: #fff;
  height: 100vh;
  width: 100%;
}
.yjwg {
  border-left: 5px solid#f5f7f9;
  border-right: 5px solid#f5f7f9;
  background-color: #fff;
  height: 100vh;
  width: 100%;
  padding: 20px;
}
.dxwg{
    border-left: 5px solid#f5f7f9;
  border-right: 5px solid#f5f7f9;
  background-color: #fff;
  height: 100vh;
  width: 100%;
  padding: 20px;
}
.wxgzh{
    border-left: 5px solid#f5f7f9;
  border-right: 5px solid#f5f7f9;
  background-color: #fff;
  height: 100vh;
  width: 100%;
  padding: 20px;
}
</style>